<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World</title>
  <script src="https://unpkg.com/vue"></script>

</head>

<body>
  <div id="root"></div>
  <script>
    /* 
      1. 组件参数
        - props 数组
      2. 动态参数 vs 静态传参
        - 静态传参 字符串类型
        - 动态传参 任意类型
      3. 传参校验
        - props 对象1
          - key: 参数值，value：类型
          - Function/Object/Boolean/Array/String
        - props 对象2
          - key: 参数值，value: { 
            type:类型,
            default:默认值、返回默认值的函数,
            required: 必填项true/false,
            validator:() => {} 校验函数
           }
    */
    const counter = {
      data() {
        return {
          count: 1
        }
      },
      template: `<div>
      <p>{{count}}</p>
      <button @click="count++" >增加</button> 
    </div>`
    }
    const app = Vue.createApp({
      components: {
        counter
      },
      template: `<div>
        <counter />
        <counter />
        <counter />  
      </div>`
    })

    const vm = app.mount('#root');
  </script>
</body>

</html>